<template>
  <div class="header_bg">
    <div class="wrapper">
      <div class="header_section">
        <div class="img_bg">
          <img src="https://image.utea88.com/statics/utea88_logo.png" alt="">
        </div>
        <div class="text_section">
          <div v-for="(item, index) in navList" :key="index">
            <div :class="[currentIndex == index ? 'active' : '', 'text_bg']" class="text_bg" @click="handleClick(item)">
              {{ item.name }}
              <div v-if="currentIndex == index" class="line"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>


	export default {
    name: 'NewHome',
		components: {
			
		},
		data() {
			return {
        currentIndex: 0,
        navList: [
          {
            name: "首页",
            to: "/home"
          },
          {
            name: "走进众茶",
            to: "/zouJin"
          },
          {
            name: "企业资讯",
            to: "/newHomeZiXun"
          },
          {
            name: "商务合作",
            to: "/newHomeCooperation"
          },
          {
            name: "众茶通",
            to: "/front-home"
          },
        ]
			}
		},
		methods: {
			handleClick(item) {
        this.$router.push({
          path: item.to,
        });
      }
  	},
    mounted(){
             
    },
    created() {
      console.log(111, this.$route)
      for (let index = 0; index < this.navList.length; index++) {
        const element = this.navList[index];
        if (this.$route.path == element.to) {
          this.currentIndex = index
        }
      }
    },
	}
</script>

<style scoped lang="scss">
  .header_bg {
    position: relative;
    width: 100%;
    height: 100px;

    .wrapper {
      position: fixed;
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: center;
      background: white;
      z-index: 50;
    }
  }

	.header_section {
    position: relative;
    width: 1120px;
    height: 100px;
    background: white;

    .img_bg {
      position: absolute;
      top: 30px;
      left: 0;
      width: 170px;
      height: 40px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .text_section {
      position: absolute;
      top: 25px;
      right: 0;
      width: 550px;
      height: 50px;
      display: flex;

      .text_bg {
        position: relative;
        width: 110px;
        height: 100%;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 50px;
        color: rgba(0, 0, 0, 1);
        text-align: center;
        vertical-align: top;
        cursor: pointer;

        .line {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          bottom: 0;
          width: 50px;
          height: 2px;
          background: rgba(15, 131, 193, 1);;
        }
      }

      .active {
        color: rgba(15, 131, 193, 1);
      }
    }
  }
</style>

